<!doctype html> 
<html> 
 <head> 
  <title>WarGames Interface</title> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
  <script type="text/javascript"> 
   function disableFields(method) {
      var a = $('#name, #desc, #card, #resp, #ment');
      if(method == "GET" || method == "DELETE") {
         for(x in a)
            a[x].disabled = true;
      } else if(method == "PUT" || method == "POST") {
         for(x in a)
            a[x].disabled = false;
      }
   }
 
   function submitForm() {
      var id = 0;
      if($('#id').val() != "")
         id = $('#id').val();
 
      var method="GET";
      var radios = $('#f')[0].method;
      for(var x=0; x < radios.length; x++)
         if(radios[x].checked)
            method = radios[x].value;
      
      var data = { };
      if(!$('#name')[0].disabled) data.name = $('#name').val();
      if(!$('#desc')[0].disabled) data.description = $('#desc').val();
      if(!$('#card')[0].disabled) data.cardiacstate = $('#card').val();
      if(!$('#resp')[0].disabled) data.respiratorystate = $('#resp').val();
      if(!$('#ment')[0].disabled) data.mentalstate = $('#ment').val();
 
      var datastring = "id: " + id;
      for(x in data)
         datastring += ", " + x + ": " + data[x];
 
      $('#data').html("url: http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id + "<br>http method: " + method + "<br>data: " + datastring);
 
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id,
         type: method,
         data: data,
         success: printResult
      });
   }
 
   var d, t, j;
   function printResult(data, textStatus, jqXHR) {
      d = data;
      t = textStatus;
      j = jqXHR;
      $('#result').text(data);
   }
  </script> 
  <style type="text/css"> 
   fieldset { display: inline-block; }
  </style> 
 </head> 
 <body> 
  <form id="f"> 
   <fieldset> 
    <legend>HTTP Method</legend> 
    <input type="radio" name="method" value="GET" id="get" onclick="disableFields('GET')"><label for="get">GET</label><br> 
    <input type="radio" name="method" value="PUT" id="put" onclick="disableFields('PUT')"><label for="put">PUT</label><br> 
    <input type="radio" name="method" value="POST" id="post" onclick="disableFields('POST')"><label for="post">POST</label><br> 
    <input type="radio" name="method" value="DELETE" id="del" onclick="disableFields('DELETE')"><label for="del">DELETE</label> 
   </fieldset> 
   <br> 
   <fieldset> 
    <legend>Fields</legend> 
    <table> 
     <tr> 
      <td><label for="id">id</label></td> 
      <td><input type="text" name="id" id="id"></td> 
     </tr> 
     <tr> 
      <td><label for="name">name</label></td> 
      <td><input type="text" name="name" id="name"></td> 
     </tr> 
     <tr> 
      <td><label for="desc">description</label></td> 
      <td><input type="text" name="description" id="desc"></td> 
     </tr> 
     <tr> 
      <td><label for="card">cardiac state</label></td> 
      <td><input type="text" name="cardiacstate" id="card"></td> 
     </tr> 
     <tr> 
      <td><label for="resp">respiratory state</label></td> 
      <td><input type="text" name="respiratorystate" id="resp"></td> 
     </tr> 
     <tr> 
      <td><label for="ment">mental state</label></td> 
      <td><input type="text" name="mentalstate" id="ment"></td> 
     </tr> 
    </table> 
   </fieldset> 
   <br> 
   <input type="button" name="submit" value="Submit" onclick="submitForm()"> 
  </form> 
  <div id="data"></div> 
  <div id="result"></div> 
 </body>
</html>